<template>
  <div class="ele-body">
    <el-card shadow="never">
      <ele-pro-table
          ref="table"
          row-key="NodeID"
          :datasource="url"
          :columns="columns"
          default-expand-all
          :need-page="false"
          :parse-data="parseData">
        <template slot="toolbar">
          <el-button
              v-if="power.create"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="openEdit(null)">添加
          </el-button>
          <el-button
              @click="expandAll"
              class="ele-btn-icon">展开全部
          </el-button>
          <el-button
              @click="foldAll"
              class="ele-btn-icon">折叠全部
          </el-button>
        </template>
        <!-- 类型列 -->
        <template slot="NodeType" slot-scope="{row}">
          <el-tag
              v-if="[1, 2].includes(row.NodeType)"
              :type="['', 'primary', 'info'][Number(row.NodeType)]">
            {{ ['', '菜单', '按钮'][Number(row.NodeType)] }}
          </el-tag>
        </template>
        <template slot="NodeName" slot-scope="{row}">
          <i v-if="row.NodeIcon" :class="row.NodeIcon"/>
          {{ row.NodeName }}
        </template>
        <!-- 操作列 -->
        <template slot="action" slot-scope="{row}">
          <template v-if="power.isContainAuth">
            <el-link type="primary" :underline="false" icon="el-icon-edit" v-if="power.update" @click="openEdit(row)">
              编辑
            </el-link>
            <el-link
                v-if="Number(row.ParentID) === 0 && power.create"
                type="primary"
                :underline="false"
                icon="el-icon-plus"
                @click="openEdit(null, row.NodeID)">添加菜单
            </el-link>
            <template v-else>
              <el-link
                  v-if="Number(row.NodeType) === 1 && power.create"
                  type="primary" :underline="false"
                  icon="el-icon-plus" @click="openEdit(null, row.NodeID)">
                添加按钮
              </el-link>
              <confirm-button
                  v-if="power.delete"
                  :status="Number(row.NodeStatus)"
                  @confirm="(status) => updateStatus(status, row)"/>
            </template>
          </template>
          <template v-else> ---</template>
        </template>
      </ele-pro-table>
    </el-card>
    <!-- 编辑弹窗 -->
    <save-node :data="current" :menu-list="menuList" :visible.sync="showEdit" @done="reload"/>
  </div>
</template>

<script>
import SaveNode from './dialog/save'
import columns from '@/config/columns/node'
import ConfirmButton from '@/components/plugIn/confirm-button'

export default {
  name: 'node-index',
  components: {
    SaveNode,
    ConfirmButton
  },
  data () {
    return {
      // 表格数据接口
      url: '/node',
      // 表格列配置
      columns,
      // 表格数据
      list: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 全部菜单数据-临时数据
      menuListTemp: [],
      // 全部菜单数据
      menuList: [],
      // 权限
      power: {}
    }
  },
  created () {
    let auth = {
      create: 'node:create',
      update: 'node:update',
      delete: 'node:delete',
    }
    this.power = this.$roleListPermission(auth)
  },
  methods: {
    /* 解析接口返回数据 */
    parseData (res) {
      this.list = res.result.list
      res.result.list.map(res => {
        this.menuListTemp[res.NodeID] = res
      })
      let menuList = []
      res.result.list.forEach(res => {
        if (Number(res.NodeType) === 1) {
          menuList.push({
            NodeID: res.NodeID,
            ParentID: res.ParentID,
            NodeName: res.NodeName,
          })
        }
      })
      this.menuList = this.$util.toTreeData(menuList, 'NodeID', 'ParentID')
      res.result.list = this.$util.toTreeData(res.result.list, 'NodeID', 'ParentID')
      return res
    },
    /* 刷新表格 */
    reload () {
      this.$refs.table.reload()
    },
    /* 显示编辑 */
    openEdit (row = {}, parentId = 0) {
      let parent = parentId ? {
        NodeType: 1,
        ControllerName: this.menuListTemp[parentId].ControllerName,
        AddButton: true
      } : {}
      this.current = Object.assign({
        NodeType: 1,
        ParentID: parentId
      }, row, parent)
      this.showEdit = true
    },
    /* 删除 */
    updateStatus (status, row) {
      if (row.children && row.children.length > 0) {
        this.$message.error('请先删除子节点')
        return
      }
      const loading = this.$loading({ lock: true })
      this.$http.post('/node/status', { ID: row.NodeID, Status: status }).then(res => {
        loading.close()
        if (res.data.code === 200) {
          this.$message.success(res.data.msg)
          this.reload()
        }
      }).catch(() => {
        loading.close()
      })
    },
    /* 展开全部 */
    expandAll () {
      this.list.forEach(d => {
        this.$refs.table.toggleRowExpansion(d, true)
      })
    },
    /* 折叠全部 */
    foldAll () {
      this.list.forEach(d => {
        this.$refs.table.toggleRowExpansion(d, false)
      })
    },
  }
}
</script>

